<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="quicky, chat, messenger, conversation, social, communication" />
    <meta name="description"
        content="Quicky is a Bootstrap based modern and fully responsive Messaging template to help build Messaging or Chat application fast and easy." />
    <meta name="subject" content="communication">
    <meta name="copyright" content="frontendmatters">
    <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />
    <link rel="stylesheet" href="../../css/inter/inter.css">
    <link rel="stylesheet" href="../../css/app.min.css">
    <link rel="stylesheet" href="../../elementUI/index.css">
    <title>客服中心</title>
</head>

<body>
    <div class="main-layout" id="app">
        <!-- Sidebar Start -->
        <aside class="sidebar">
            <!-- Tab Content Start -->
            <div class="tab-content">
                <!-- Chat Tab Content Start -->
                <div class="tab-pane active" id="chats-content">
                    <div class="d-flex flex-column h-100">
                        <div class="hide-scrollbar h-100" id="chatContactsList">
                            <!-- 客户名字 -->
                            <ul class="contacts-list" id="chatContactTab" data-chat-list="">
                                <!-- Chat Item Start -->
                                <li @click="handle(index)" v-for="(item,index) in user" :key="index"
                                    class="contacts-item friends active">
                                    <a class="contacts-link">
                                        <div class="avatar avatar-online">
                                            <img :src="item.Image" alt="">
                                        </div>
                                        <div class="contacts-content">
                                            <div class="contacts-info">
                                                <h6 class="chat-name text-truncate">
                                                    {{item.Nick==''?item.Open_ID:item.Nick}}
                                                </h6>
                                                <div class="chat-time">{{user[index].list[user[index].list.length-1].Time}}</div>
                                            </div>
                                            <div>
                                                <span style="color: white;">{{user[index].list[user[index].list.length-1].Message}}</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <main class="main main-visible">
            <!-- Chats Page Start -->
            <div class="chats" v-if="user.length > 0">
                <div v-show="isShow" class="chat-body">
                    <div ref="content" class="chat-content p-2" id="messageBody" >
                        <!-- 聊天框 -->
                        <div class="container" id="TextBox_TodayMessage" >
                            <div  class="message-day"  >
                                <!-- 聊天气泡 -->
                                <div class="message" :class="value.type == 0?'':'self'" v-for="(value,id) in user2"
                                    :key="id">
                                    <div class="message-wrapper">
                                        <div class="message-content"><span>{{value.Message}}</span></div>
                                    </div>
                                    <div class="message-options">
                                        <div class="avatar avatar-sm" style="background-color: rgb(243, 241, 237);">
                                            <img alt="" :src="value.type == 0 ? user[index].Image : './9.png'">
                                        </div>
                                        <span class="message-date">{{value.Time}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 聊天输入-->
                    <div class="chat-footer">
                        <form>
                            <div class="form-row">
                                <!-- Chat Input Group Start -->
                                <div class="col">
                                    <div class="input-group">
                                        <textarea id="TextBox_ReplyMessage" v-model="user[index].Seed_Message"
                                            class="form-control transparent-bg border-0 no-resize hide-scrollbar"
                                            placeholder="请输入你要发送的消息" rows="1"></textarea>
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <div id="Button_SendMessage" @click="send"
                                        class="btn btn-primary btn-icon rounded-circle text-light mb-1" role="button">
                                        <svg class="hw-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- Chat Footer End-->
                </div>
            </div>
        </main>

    </div>
</body>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../elementUI/index.js"></script>
<script type="text/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../../js/jquery.cookie.js"></script>
<script type="text/javascript" src="../../js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="../../js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="../../js/modal-steps.min.js"></script>
<script type="text/javascript" src="../../js/svg-inject.min.js"></script>
<script type="text/javascript" src="../../js/app.min.js"></script>
<script type="text/javascript" src="../../js/utils.js"></script>
<script type="text/javascript" src="./js/CustomerServiceCenter.js"></script>

</html>